axios.defaults.baseURL = 'http://ajax-api.itheima.net'
const topPart = document.querySelector('.top')

const renderList = async () => {
  const { data: res } = await axios({
    url: '/api/category/top',
    method: 'GET',
  })
  const newArr = res.data.map((item) => {
    return axios({
      url: '/api/category/sub?id=' + item.id,
      method: 'GET',
    })
  })
  const Allnewdata = await Promise.all(newArr)
  let html = Allnewdata.map(({ data: item }) => {
    console.log(item)
    return ` <li>
      <a href="javascript:;">${item.data.name}</a>
      <img
        src="${item.data.picture}"
        alt=""
      />
      <ul class="sub">${item.data.children
        .map((item) => {
          return `<li>
        <a href="javascript:;">
          <span>${item.name}</span>
          <img
            src="${item.picture}"
            alt=""
          />
        </a>
      </li>`
        })
        .join('')}
      </ul>
    </li>`
  }).join('')
  topPart.innerHTML = html
}
renderList()
